import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Table, Popconfirm, message, Tooltip, Empty } from 'antd';
import { deletePort } from '@api/task';
import PortSettingModal from '../port-manage-modal';
import './index.less';

const prefixCls = 'port-manage-table';

class PortManageTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      portManageModalVisible: false,
      detail: {}
    };
  }

  deletePort = body => {
    deletePort(body)
      .then(() => {
        this.props.getPortList();
        message.success('删除成功');
      })
      .catch(() => {
        message.erroe('删除失败');
      });
  };

  changeModalVisible = (visible, record) => {
    this.setState({
      portManageModalVisible: visible,
      detail: record
    });
  };

  render() {
    const { portManageModalVisible } = this.state;
    const { data, pagination, onTableChange, loading } = this.props;
    const columns = [
      {
        title: '名称',
        dataIndex: 'name',
        width: '15%'
      },
      {
        title: '端口',
        dataIndex: 'ports',
        width: '65%',
        render: ports => {
          return (
            <div style={{ wordWrap: 'break-word', wordBreak: 'break-all', maxWidth: 1000 }}>
              {ports.map((item, index) => (
                <span key={index} className={`${prefixCls}-ports-span`}>
                  {item}
                </span>
              ))}
            </div>
          );
        }
      },
      {
        title: '类型',
        dataIndex: 'is_build_in',
        width: '5%',
        render: isBuildIn => {
          return isBuildIn ? '系统默认' : '自定义';
        }
      },
      {
        title: '操作',
        dataIndex: 'operations',
        width: '15%',
        render: (operations, record) => {
          let disabled = record.is_build_in;
          return disabled ? (
            <div>
              <Tooltip title="该策略模板为系统内置模板，不能进行编辑">
                <span style={{ cursor: 'not-allowed' }}>编辑</span>
              </Tooltip>
              <Tooltip title="该策略模板为系统内置模板，不能进行删除">
                <span style={{ cursor: 'not-allowed', marginLeft: 10 }}>删除</span>
              </Tooltip>
            </div>
          ) : (
            <div>
              <a onClick={() => this.changeModalVisible(true, record)}>编辑</a>
              <Popconfirm
                placement="bottomRight"
                title={'确定删除吗'}
                onConfirm={() => this.deletePort({ port_id: record._id })}
                okText="确定"
                cancelText="取消"
              >
                <a style={{ marginLeft: 10, color: '#F04038' }}>删除</a>
              </Popconfirm>
            </div>
          );
        }
      }
    ];

    return (
      <div className={`${prefixCls}`}>
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={data}
          onChange={onTableChange}
          loading={{ spinning: loading, tip: '加载中' }}
          locale={{
            emptyText: (
              <Empty
                description={loading ? ' ' : '暂无数据'}
                image={Empty.PRESENTED_IMAGE_SIMPLE}
              />
            )
          }}
        />
        <PortSettingModal
          modalVisible={portManageModalVisible}
          changeModalVisible={this.changeModalVisible}
          getPortList={this.props.getPortList}
          detail={this.state.detail}
        />
      </div>
    );
  }
}

PortManageTable.propTypes = {
  onTableChange: PropTypes.function,
  changeModalVisible: PropTypes.function,
  total: PropTypes.number,
  data: PropTypes.array,
  pagination: PropTypes.object,
  getPortList: PropTypes.function,
  loading: PropTypes.boolean
};

export default PortManageTable;
